NaN

Css进阶

(1) 弹性布局(弹性盒子)

  1. flex-direction 盒子排列方向
  2. justify-content 水平对齐方式
  3. align-items 垂直对齐方式
  4. align-self 垂直方式单独设置
  5. flex-grow剩余空间分配
  6. flex-wrap 换行
  7. 盒子纵向排列注意事项

1. flex-direction 盒子排列方向

当我们对一个元素设置 display: flex 这个盒子就变成了一个弹性盒子, 它就有如下特点:

  • 盒子里面的元素可以横向排列, 也可以纵向排列
    • flex-direction: row; 横向排列(默认)
    • flex-direction:column; 纵向排列
  • 盒子里面的元素可以有更多的排列方式(后面的例子)
<!DOCTYPE html>
<html lang="en"> 
<head>
  <style>
    .box {
      width: 300px;
      height: 300px;
      border: 1px solid;
      display: flex;
      /* 默认row横向 */
      /* flex-direction: row; */
      /* 默认column纵向 */
      flex-direction: column;
    }
    .box span {
      width: 50px;
      height: 50px;
      background-color: gray;
    }
    .box span:nth-child(2) {
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="box">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body> 
</html>

2. justify-content 水平对齐方式

当盒子的排列方向为横向时, 我们可以使用justify-content来对盒子内的元素进行水平方向的对齐方式, 它的取值常用的有5种:

  • flex-start 左对齐(默认)
  • center 居中对齐
  • flex-end 右对齐
  • space-between 两端对齐
  • space-around 分散对齐
<!DOCTYPE html>
<html lang="en"> 
<head>
   <style>
      .box {
         height: 100px;
         width: 250px;
         border: 1px solid;
         display: flex; 
         /* justify-content: flex-start; */
         /* justify-content: center; */
         /* justify-content: flex-end; */
         /* justify-content: space-between; */
         justify-content: space-around;
      }
      .box span {
         width: 50px;
         height: 50px;
         background-color: gray;
      }
      .box span:nth-child(2) {
         background-color: green;
      }

   </style>
</head>
<body>
   <div class="box">
      <span>1</span>
      <span>2</span>
      <span>3</span>
   </div>
</body>
</html>

3. align-items 垂直对齐方式

align-items 取值常用的有三种

  • flex-start 顶部对齐(默认)
  • center 居中对齐
  • flex-end 底部对齐
<!DOCTYPE html>
<html lang="en"> 
<head>
   <style>
      .box {
         height: 100px;
         width: 250px;
         border: 1px solid;
         display: flex; 
         /* justify-content: flex-start; */
         /* justify-content: center; */
         /* justify-content: flex-end; */
         /* justify-content: space-between; */
         justify-content: space-around;
         /* align-items: flex-start; */
         /* align-items: center; */
         align-items: flex-end;

      }
      .box span {
         width: 50px;
         height: 50px;
         background-color: gray;
      }
      .box span:nth-child(2) {
         background-color: green;
      }

   </style>
</head>
<body>
   <div class="box">
      <span>1</span>
      <span>2</span>
      <span>3</span>
   </div>
</body>
</html>

4. align-self 垂直方式单独设置

align-items是对所有子元素进行设置, align-self允许单独对某一个子元素进行设置, 用来和align-items相似, 但是它对子元素进行设置

<!DOCTYPE html>
<html lang="en"> 
<head>
   <style>
      .box {
         height: 100px;
         width: 250px;
         border: 1px solid;
         display: flex;  
         justify-content: space-around; 
         align-items: flex-end; 
      }
      .box span {
         width: 50px;
         height: 50px;
         background-color: gray;
      }
      .box span:nth-child(2) {
         background-color: green;
         align-self: flex-start;
      }

   </style>
</head>
<body>
   <div class="box">
      <span>1</span>
      <span>2</span>
      <span>3</span>
   </div>
</body>
</html>

5. flex-grow剩余空间分配

盒子内如果有剩余的空间, 可以使用flex-grow来进行分配

flex-shink(了解), 空间不足的时候, 子元素会被缩小

<!DOCTYPE html>
<html lang="en"> 
<head>
   <style>
      .box {
         height: 100px;
         width: 250px;
         border: 1px solid;
         display: flex;   
         align-items: center;
      }
      .box span {
         width: 50px;
         height: 50px;
         background-color: gray;
      }

      .box span:nth-child(1) { 
         flex-grow: 1;
      }
      .box span:nth-child(2) {
         background-color: green; 
         flex-grow: 2;
      }
      .box span:nth-child(3) { 
         flex-grow: 2;
      }

   </style>
</head>
<body>
   <div class="box">
      <span>1</span>
      <span>2</span>
      <span>3</span>
   </div>
</body>
</html>

6. flex-wrap 换行

flex-wrap常用两个取值

  • flex-wrap: nowrap; 不换行

  • flex-wrap: wrap; 换行

  • align-content 子元素的排列方式, 在多行的时候使用

<!DOCTYPE html>
<html lang="en"> 
<head>
   <style>
      .box {
         height: 400px;
         width: 250px;
         border: 1px solid;
         display: flex;    
         /* flex-wrap: nowrap; */
         flex-wrap: wrap;
         justify-content: space-around;
         align-content: flex-start;
      }
      .box span {
         width: 50px;
         height: 50px;
         margin: 5px;
         background-color: gray;
      } 

   </style>
</head>
<body>
   <div class="box">
      <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span>
   </div>
</body>
</html>

7. 盒子纵向排列注意事项

当盒子纵向排列时, 注意:

justify-content 用来设置纵向排列方式, 取值依然是5个

align-items 用来设置横向排列方式, 取值只有三个

<!DOCTYPE html>
<html lang="en">

<head>
   <style>
      .box {
         height: 400px;
         width: 250px;
         border: 1px solid;
         display: flex;
         /* 纵向排列 */
         flex-direction: column;
         /* 纵向排列方式 */
         justify-content: flex-start;
         justify-content: flex-end;
         justify-content: space-between;
         justify-content: space-around;
         /* align-items横向对齐方式 */
         align-items: flex-start;
         align-items: center;
         align-items: flex-end;

      }

      .box span {
         width: 50px;
         height: 50px;
         margin: 5px;
         background-color: gray;
      }
   </style>
</head>

<body>
   <div class="box">
      <span>1</span><span>2</span><span>3</span>
   </div>
</body> 
</html>

(2) 浮动

  1. 浮动
  2. 清除浮动
  3. 通用清除浮动样式

1. 浮动

浮动会脱离文档流, 跟随其后的元素会塌陷.

  • float: left; // 左浮动
  • float: right; // 右浮动
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .left {
         height: 200px;
         background-color: gray;
         width: 300px;
         float: left;
      }
      .right {
         height: 210px;
         width: 300px;
         background-color: greenyellow;
         float: right; 
      }
   </style>
</head>
<body>
   <div class="left">左侧</div>
   <div class="right">右侧</div>
</body>
</html>

2. 清除浮动

  • clear: left; // 清除左边浮动
  • clear: right; // 清除右边浮动
  • clear: both; // 清除全部浮动
<head>
   <style> 
      .box {
         border: 3px solid red;
      }
      .box .son {
         float: left;
      } 
      .box2 {
         height: 100px;
         background-color: green;
      }
   </style>
</head>

<body>
   <div class="box">
      <div class="son">子元素</div>
      <div style="clear: both;"></div>
   </div> 

   <div class="box2">
      box2
   </div> 
</body> 
</html>

3. 通用清除浮动样式

父元素如果不设置高度, 那么父元素的高度会自动根据子元素的高度来获得高度, 但如果子元素设置了浮动, 父元素的高度就为0

清除浮动方法1: 添加一个空div，利用css的clear:both清除浮动，让父级div能自动获取到高度

<head>
   <style> 
      .box {
         border: 3px solid red;
      }
      .box .son {
         float: left;
      } 
      .box2 {
         height: 100px;
         background-color: green;
      }
   </style>
</head>

<body>
   <div class="box">
      <div class="son">子元素</div>
      <div style="clear: both;"></div>
   </div> 

   <div class="box2">
      box2
   </div> 
</body> 
</html>

清除浮动方法2: 使用伪类元素, 编写一个clear类用来清除浮动, 谁的子元素浮动了, 就给谁添加clear类

<!DOCTYPE html>
<html lang="en">

<head>
   <style> 
      .box {
         border: 3px solid red;
         width: 300px;
      } 
      .box .son {
         float: left;
      } 
      /* 请浮动的类 */
      .clear:after {
         content: '';
         display: block;
         clear: both;
         height: 0;
      } 
      .box2 {
         height: 100px;
         background-color: green;
      } 
   </style>
</head>

<body>
   <div class="box clear">
      <div class="son">子元素</div>
   </div>

   <div class="box2">
      box2
   </div> 
</body> 
</html>
  1. 其他方式

(3) css布局

  1. 流式布局之两列布局
    • 左侧固定，右侧自适应
    • 左侧自适应，右侧固定
  2. 流式布局之圣杯布局和双飞翼布局
  3. 响应式布局
  4. flex弹性盒子布局(略)

1. 流式布局

css中的流式布局是指页面中元素的宽度按照屏幕分辨率自动进行适配调整，它可以保证当前屏幕分辨率发生改变的时候，页面中的元素大小也可以跟着改变。

  • 流式布局1: 左侧固定，右侧自适应
  • 流式布局2: 左侧自适应，右侧固定
<!-- 方法1: 使用浮动 -->
<!DOCTYPE html>
<html lang="en"> 
<head>
   <style> 
       .left {
          height: 300px;
          /* 左侧固定 */
          width: 300px;
          background-color: gray;
          float: left;
       }
       .right {
          height: 310px;
          margin-left: 310px;
          background-color: green;
       }
   </style>
</head> 
<body>
   <!-- 左侧固定，右侧自适应  -->
   <div class="left"> </div> 
   <div class="right"> </div> 
</body> 
</html>


<!-- 方法2: 使用绝对定位 -->
<!DOCTYPE html>
<html lang="en">

<head>
   <style>
      .box {position: relative;border:2px solid red;}
      .left {
         height: 300px;
         /* 左侧固定 */
         width: 300px;
         background-color: gray;
         /* 绝对定位 */
         position: absolute;
      }

      .right {
         height: 310px;
         margin-left: 310px;
         background-color: green;
      }
   </style>
</head>

<body>
   <!-- 左侧固定，右侧自适应  -->
   <div class="box">
      <div class="left"> </div>
      <div class="right"> </div>
   </div>
</body> 
</html>

2. 圣杯布局和双飞翼布局

圣杯布局: 三列布局, 左右两侧固定, 中间自适应, 并且中间内容先加载.

这两个布局非常重要，性能什么的都要比上面好很多，主要是为了让content内容区域优先加载。

步骤: (核心: 浮动+margin负值)

  1. 中间元素放最上面 (这样它可以先加载)
    • 宽度100%
    • 左浮动
  2. 左侧元素
    • 宽度设为300px(根据实际需要)
    • 左浮动
    • margin-left取值 -100%;
  3. 右侧元素
    • 宽度设为300px(根据实际需要)
    • 左浮动
    • margin-left取值 -300px;
<!DOCTYPE html>
<html lang="en">

<head>
   <style>
      .box {
         position: relative;
         border: 2px solid red;
      }

      .left {
         height: 300px;
         /* 左侧固定 */
         float: left;
         margin-left: -100%;
         width: 300px;
         background-color: gray;  

      }

      .center { 
         height: 300px; 
         background-color: yellow;
         float: left;
         width: 100%;
      }

      .right {   
         height: 310px;
         width: 300px;
         float: left;
         margin-left: -300px;;
         background-color: green;
      }
   </style>
</head>

<body>
   <!-- 左侧固定，右侧自适应  -->
   <div class="box">
      <div class="center">中间</div>
      <div class="left">左侧 </div>
      <div class="right">右侧 </div>
   </div>
</body>

</html>

3. 响应式布局

响应式布局核心: @media

响应式布局的常用尺寸

  • 超小屏幕：（手机，小于768px）
  • 小屏幕：（平板，大于等于768px）
  • 中等屏幕：（桌面显示器，大于等于992px）
  • 大屏幕：（大桌面显示器，大于等于1200px）
@media (min-width: 1200px) { ... } 
/ *平板电脑和小屏电脑之间的分辨率* /
@media (min-width: 768px) and (max-width: 979px) { ... } 
/ *横向放置的手机和竖向放置的平板之间的分辨率* /
@media (max-width: 767px) { ... }
/ *横向放置的手机及分辨率更小的设备* /
@media (max-width: 480px) { ... }

<!-- 原理 -->
<!DOCTYPE html>
<html lang="en"> 
<head>
   <style>
      html,
      body {
         height: 100%;
      } 
      @media (min-width: 1200px) {
         body {
            background-color: green;
         }
      } 
      /* 平板电脑和小屏电脑之间的分辨率 */ 
      @media (min-width: 768px) and (max-width: 979px) {
         body {
            background-color: yellow;
         }
      } 
      /* 横向放置的手机和竖向放置的平板之间的分辨率 */ 
      @media (max-width: 767px) {
         body {
            background-color: gray;
         }
      } 
      /* 横向放置的手机及分辨率更小的设备 */ 
      @media (max-width: 480px) {
         body {
            background-color: blue;
         }
      }
   </style>
</head> 
<body> 
</body> 
</html>

举例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

    <style>
      /* 默认pc端样式 */
      * {margin: 0;}
      body{background-color: #f4f4f4;}
      header {
        height: 50px;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }  
      /* 手机端样式 */
      @media (max-width: 767px) {
        header {
          flex-direction: column;
          height: auto;
        }
        .item {
          border-bottom: 1px solid #999;
          width: 100%;
          height: 50px;
          text-align: center;
          line-height: 50px;
        }
      } 

    </style>
  </head>
  <body>
      <header>
        <span class="item">html</span>
        <span class="item">css</span>
        <span class="item">js</span>
        <span class="item">vue</span>
        <span class="item">小程序</span>
        <span class="item">react</span>
        <span class="item">webpack</span>
        <span class="item">git</span>
        <span class="item">node</span>
      </header>  
  </body>
</html>

布局大全

(4) 盒子阴影

使用box-shadow设置盒子阴影, 常用5个选项

  • X轴偏移量
  • Y轴偏移量
  • [阴影模糊半径]
  • [阴影扩展]
  • [阴影颜色]
  • [投影方式] inset:内凹(可选)
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body {
      background-color: #f4f4f4;
    }
    .box {
      margin: 100px;
      width: 100px;
      height: 100px;
      border: 1px solid #fff;
      box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
    } 
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

(5) 2D变换

用transform样式来设置2d变化, 其取值如下:

  1. translate() 定义 2D 转换, 就是平移(横向的,纵向的)
    • translate-x: 横向移动
    • translate-y: 纵向移动
    • translate: 两个选项: 第一个选项横向移动, 第二个选项纵向移动
  2. rotate() 旋转
  3. scale() 缩放
  4. skew() 倾斜
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    p{ 
      width: 200px;
      height: 50px;
      border: 1px solid;
    }
    p:nth-child(1) {
      transform: translate(50px,30px);
    }
    p:nth-child(2) {
      margin: 100px;
      transform: rotate(30deg);
    }
    p:nth-child(3) {
      transform: scale(.5);
    }
    p:nth-child(4) {
      transform: skew(10deg,10deg);
    }
  </style>
</head>
<body>
  <p>translate 平移</p>
  <p>rotate 旋转</p>
  <p>scale 缩放</p>
  <p>skew 倾斜</p>  
</body>
</html>

(6) 过渡和动画

  1. transition过渡
  2. Keyframes动画

1. transition过渡

  • transition-property 选项1(必须): 规定设置过渡效果的 CSS 属性的名称。
  • transition-duration 选项2(必须): 规定完成过渡效果需要多少秒或毫秒。
  • transition-timing-function 选项3(可选): 规定速度效果的速度曲线。
  • transition-delay 选项4(可选): 定义过渡效果何时开始。
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: gray;
      /* 对宽度设置过渡效果 */
      transition: width 3s ease; 

    }
    div:hover {
       width: 500px; 
    }
  </style>
</head>
<body>
   <div></div>
</body>
</html>

2. Keyframes动画

  • @keyframes 定义动画名称和动作
  • animation-name 使用的动画名称
  • animation-duration:5s 动画时长
  • animation-iteration-count 动画次数
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    div {
       height: 100px;
       width: 100px;
       background: red;
       position: fixed;
       /* 使用动画,动画名称 */
       animation-name: move;
       /* 动画时长 */
       animation-duration: 5s;
       animation-iteration-count: 10;
    } 

    /* 创建动画 */
    @keyframes move {
      /* 设置动画初始状态 */
      0% {
        background: red;
        left: 0;
        top: 0;
      }
      25% {
        background: yellow;
        left: 200px;
        top: 0;
      }
      50% {
        background: blue;
        left: 200px;
        top: 200px;
      }
      75% {
        background: green;
        left: 0;
        top: 200px;
      }
      100%{
        background: red;
        left: 0;
        top: 0;
      } 
    }
  </style>
</head>
<body>
   <div></div>
</body>
</html>

(7) 块级格式化上下文BFC

  1. 什么是BFC
  2. 如何创建一个BFC(一个盒子在什么条件下会变成BFC)
  3. BFC的布局规则(盒子变成BFC后有什么特殊的地方)
  4. BFC的应用(BFC有什么用)

1. 什么是BFC

BFC全称Block Formatting Context，翻译过来就是块级格式化上下文, 也就是常说的BFC, 如同弹性盒子一样, 当一个元素符合某些特定的条件时, 它就变成了BFC, 它就具备了一些特殊的功能.

2. 如何创建一个BFC(一个盒子在什么条件下会变成bfc)

  1. 浮动元素，float 除 none 以外的值；
  2. 定位元素，position（absolute，fixed）；
  3. overflow 除了 visible 以外的值（hidden，auto，scroll）；
  4. display 为以下其中之一的值 inline-block，table-cell，table-caption, flex；
  5. body 根元素

3. BFC的布局规则(盒子变成BFC后有什么特殊的地方)

  1. 内部的Box会在垂直方向上一个接一个的放置。
  2. BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
  3. BFC的区域不会与float的元素区域重叠。
  4. 垂直方向上的距离由margin决定
  5. 计算BFC的高度时，浮动元素也参与计算

4. BFC的应用

  1. 解决margin-top塌陷问题(利用BFC第2条特性)

    <!DOCTYPE html>
<html lang="en">
<head>
  <style>
      .aa {
        /* 解决塌陷 */
        overflow: auto;
        height: 200px;
        width: 200px;
        background: grey;
      }
      .aa .bb {
        margin-top: 50px;
        width: 100px;
        height: 50px;
        background: green;
      }
  </style>
</head>
<body>
  <h3>margin-top塌陷问题</h3> 
  <div class="aa">
    <div class="bb"></div>
   </div>
</body>
</html>

  2. 两列布局(利用了BFC第3点特性)

    <!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .aa { 
      height: 500px;
      width: 300px;
      background: grey;
      float: left;
      margin-right: 10px;
    }

    .bb { 
      overflow: auto;
      height: 510px;  
      background: green;
    }
  </style>
</head>

<body>
  <h3>两列布局</h3>
  <div class="aa"> </div>
  <div class="bb"></div>
</body> 
</html>

其他详细信息

(8) 水平垂直居中

如何让一个盒子在另外一个盒子中水平居中和垂直居中

  1. 弹性盒子
  2. 绝对定位

(9) css兼容性写法 

div {
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

(10) 作业

  1. 编写让一个盒子在另外一个盒子中水平居中和垂直居中的方法, 尽可能多的方法
  2. 两列布局: 右侧固定(300px), 左侧自适应
  3. 查找资料完成css布局中的双飞翼布局